<template>
  <div>
    <el-button size="mini" type="primary" @click="handleFormA">表单A</el-button>
    <el-button size="mini" type="primary" @click="handleFormB">表单B</el-button>
    <el-button size="mini" type="primary" @click="resetFields">清空表单</el-button>
    <form-list
      ref="formList"
      :data="isFormA ? formDataA : formDataB"
      :items="isFormA ? viewFormItemsA : viewFormItemsB"
      :label-width="200"
      @submit="handelSubmit"
    />
  </div>
</template>
<script>
  // @ is an alias to /src
  import FormList from "./formComponent";
  export default {
    name: "List",
    components: {
      FormList
    },
    data() {
      return {
        isFormA: true,
        formDataA: {
          name: '',
          region: '',
          date: ''
        },
        formDataB: {
          name: '',
          actDate: '',
          actType: true
        },
        viewFormItemsA: [
          {
            label: '名称',
            prop: 'name',
            type: 'select',
            props: {
              placeholder: '请选择名称',
              list: [{
                value: '选项1',
                label: '活动1'
              }, {
                value: '选项2',
                label: '活动2'
              }]
            },
            rules: [
              { required: true, message: '请选择名称', trigger: 'blur' }
            ]
          },
          {
            label: '区域',
            prop: 'region',
            type: 'input',
            props: {
              placeholder: ''
            },
            rules: [
              { required: true, message: '请输入活动区域', trigger: 'blur' }
            ]
          },
          {
            label: '时间',
            prop: 'date',
            type: 'date',
            props: {
              placeholder: ''
            }
          }
        ],
        viewFormItemsB: [
          {
            label: '活动名',
            prop: 'name',
            type: 'input',
            props: {
              placeholder: '请选择活动名称'
            },
            rules: [
              { required: true, message: '请选择活动名称', trigger: 'blur' }
            ]
          },
          {
            label: '活动时间',
            prop: 'actDate',
            type: 'date',
            props: {
              placeholder: ''
            },
            rules: [
              { required: true, message: '请选择日期', trigger: 'blur' }
            ]
          },
          {
            label: '活动性质',
            prop: 'actType',
            type: 'switch',
            props: {
              placeholder: '',
              disabled: true
            }
          }
        ]
      };
    },
    mounted() {
    },
    methods: {
      clearValidate() {
        this.$refs.formList.clearValidate(); // 父组件中调用子组件的（清空表单验证提示）方法
      },
      resetFields() {
        this.$refs.formList.resetForm(); // 父组件中调用子组件的（清空表单）方法
        this.formDataA = {};
        this.formDataB = {}
      },
      handleFormA() {
        this.clearValidate();
        this.isFormA = true;
        this.formDataA = {
          name: '第一个表单',
          region: '长宁区2',
          date: ''
        };
      },
      handleFormB() {
        this.clearValidate();
        this.formDataB = {
          name: '第二个表单',
          actDate: '',
          actType: true
        };
        this.isFormA = false;
      },
      handelSubmit() {
        this.$refs.formList.submit()
      }
    }
  };
</script>
<style lang="scss" scoped>

</style>
